<template>
  <div id="app">
    <Transition name="left">
      <div class="left" v-if="isSide">
        <h3 class="friend">联系人</h3>
        <ChatFriend v-if="user"></ChatFriend>
        <h4 class="is-login" v-else>请先登录</h4>
      </div>
    </Transition>

    <Transition name="left">
      <div class="min-left" v-if="isMinSide">
        <h3 class="friend">联系人</h3>
        <span @click="isMinSide = false">×</span>
        <ChatFriend v-if="user"></ChatFriend>
        <h4 class="is-login" v-else>请先登录</h4>
      </div>
    </Transition>

    <!-- 右边 -->
    <div class="right">
      <ChatNav v-model="isMinSide" v-if="screenWidth < 800"></ChatNav>
      <ChatNav v-model="isSide" v-if="screenWidth >= 800"></ChatNav>

      <div class="chatBox" ref="inpBox">
        <div v-if="user">
          <ChatMess v-for="item in chatMessage" :mess="item.mess" :key="item.id" :name="item.name" :time="item.time"
            :is-self="item.name === user"></ChatMess>
        </div>
        <h4 class="is-login" @click="login" v-else>登录/注册</h4>
      </div>

      <div class="inpBox">
        <ChatInp v-model="inpMess"></ChatInp>
      </div>

      <!-- 登录弹出层 -->
      <ChatLogin v-if="log" v-model="log"></ChatLogin>
    </div>
  </div>
</template>

<script>
import ChatNav from "./components/ChatNav"
import ChatInp from "./components/ChatInp"
import ChatMess from "./components/ChatMess.vue"
import ChatFriend from "./components/ChatFriend.vue"
export default {
  name: 'App',
  data() {
    return {
      isSide: true, // 右侧栏的显示和隐藏
      isMinSide: false, // 屏幕宽度800时候侧边栏的显示和隐藏
      screenWidth: document.body.clientWidth,
      chatMessage: [], // 消息
      user: null, // 当前登录用户名
      inpMess: "", // 发送的消息
      log: false
    }
  },
  mounted() {
    // 连接scoket
    this.linkScoket()
    // 监听屏幕大小的变化
    window.onresize = () => {
      this.screenWidth = document.body.clientWidth
    }
    // 获取本地判断有误登录
    this.user = localStorage.getItem("user")
    if (this.user) this.getMess()
  },

  // 依赖导入
  provide() {
    return {
      chatMessage: this.chatMessage
    }
  },

  components: {
    ChatNav,
    ChatInp,
    ChatMess,
    ChatFriend,
    ChatLogin: () => import("./components/ChatLogin.vue")
  },

  watch: {
    // 监听发送消息,如果发送了消息,输入框组件会改变inpMess的值, 监听inpMess的值,如果改变,说明需要触发发送函数
    inpMess() {
      // 发送消息
      this.send()
      // 把本次发送的消息清空
      this.inpMess = ""
      // 因为要等待真实dom渲染后才能设置滚轮高度
      this.$nextTick(() => {
        // 把盒子的导航栏拉到底
        this.$refs.inpBox.scrollTop = this.$refs.inpBox.scrollHeight
      })
    },
    // 监听登录页面的出现和消失,判断是否成功登录
    log() {
      this.user = localStorage.getItem("user")
      this.getMess()
    }
  },

  methods: {
    // 发送消息
    async send() {
      if (this.inpMess.length === 0 || !this.user) return
      const { data: res } = await this.$axios.post("/message/send", { name: this.user, mess: this.inpMess })
      if (res.code !== 1) return alert("发送消息失败")
      // 触发服务器发送监听,触发事件广播给所有客户端
      this.$socket.emit("message")
    },

    // 显现登录弹窗
    async login() {
      this.log = true
    },

    // 获取信息
    async getMess() {
      const { data: res } = await this.$axios.post("/message/getAll")
      console.log(res);
      if (res.code !== 1) return alert("获取消息失败")
      this.chatMessage = res.data
      // 因为要等待真实dom渲染后才能设置滚轮高度
      this.$nextTick(() => {
        // 把盒子的导航栏拉到底
        this.$refs.inpBox.scrollTop = this.$refs.inpBox.scrollHeight
      })
    },

    // scoket连接,绑定message事件,只要是有用户触发发送事件,直接广播触发获取信息事件
    linkScoket() {
      // 监听服务器发送的事件
      this.$socket.on('message', () => {
        console.log('Received message:')
        this.getMess()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#app {
  display: flex;
  width: 100%;
  height: 100%;

  .is-login {
    text-align: center;
    color: rgb(80, 80, 80);
    font-size: 30px;
    margin-top: 250px;
    font-weight: normal;
    cursor: pointer;
    user-select: none;
  }

  .friend {
    text-align: center;
    color: #fff;
    line-height: 50px;
  }

  .left {
    width: 300px;
    height: 100%;
    background-color: #202123;
  }

  .min-left {
    display: none;
  }

  .right {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-width: 400px;

    .inpBox {
      border-top: 1px solid #ccc;
    }

    .chatBox {
      flex: 1;
      overflow: auto;
    }

  }

  @media (max-width: 800px) {
    display: block;
    position: relative;

    .left {
      display: none;
    }

    .min-left {
      position: absolute;
      width: 300px;
      height: 100%;
      background-color: #202123;
      display: block;

      span {
        color: #ffffff;
        font-size: 20px;
        display: block;
        position: absolute;
        right: -32px;
        top: 5px;
        border: 1px solid #fff;
        text-align: center;
        line-height: 30px;
        height: 30px;
        width: 30px;
        background-color: #202123;
        cursor: pointer;
      }
    }
  }
}

// 侧边栏动画
.left-enter,
.left-leave-to {
  width: 0 !important;
}

.left-enter-to,
.left-leave {
  width: 300px !important;
}

.left-enter-active,
.left-leave-active {
  transition: all .5s;
}
</style>
